<template>
    <div>
        <div class="test" style="height: 800px">
            <!-- swiper2 Thumbs -->
            <div class="ctrl" style="float: left;width: 20%;height: 100%">
                <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
                    <swiper-slide v-for="val in imgList" :key="val.ID">
                        <img :src="resourceURL+val.ResourceName" alt="">
                    </swiper-slide>
                </swiper>
            </div>
            <!-- swiper1 -->
            <div class="main" style="float: left;width: 80%;height: 100%">
                <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
                    <swiper-slide v-for="val in imgList" :key="val.ID">
                        <img :src="resourceURL+val.ResourceName" alt="">
                    </swiper-slide>
                </swiper>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex'
    export default {
        props: ['imgList'],
        computed: {
            ...mapGetters([
                "resourceURL"
            ])
        },
        data() {
            return {
                swiperOptionTop: {
                    notNextTick: true,
                    direction: 'vertical',
                    mousewheelControl: true,
                    zoom: true
                },
                swiperOptionThumbs: {
                    notNextTick: true,
                    spaceBetween: 10,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    direction: 'vertical',
                    touchRatio: 0.2,
                    mousewheelControl: true,
                    slideToClickedSlide: true,
                }
            }
        },
        mounted() {
            const swiperTop = this.$refs.swiperTop.swiper
            const swiperThumbs = this.$refs.swiperThumbs.swiper
            swiperTop.params.control = swiperThumbs
            swiperThumbs.params.control = swiperTop
        }
    }
</script>

<style scoped>
    .swiper-container {
        /*background-color: #000;*/
    }

    .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .el-dialog__body {
        height: 80%;
    }


    .gallery-top {
        height: 100%;
        width: 80%;
        margin: 0 auto;
    }

    .gallery-thumbs {
        height: 100%;
        width: 100%;
    }

    .gallery-thumbs .swiper-slide {
        width: 60%;
        margin: 0 auto;
        height: 20%;
        border: 1px solid #000;
        opacity: 0.4;
    }
    img{
        display: block;
        width: 100%;
        height: 100%;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }
</style>